<script setup>

	import { ref } from 'vue'

	const dragBox = ref(null)
	const list = ref([1,2,3,4,5,6,7,8,9,10])


	function dragStartBox(e) {
		setTimeout(() => {
			dragBox.value = e.target
			e.target.classList.add('dragging')
		},0)
	}

	function dragEnter(e) {
		if (dragBox.value && dragBox.value !== e.target) {
			// 排序
			const dragBoxIndex = list.value.findIndex((item)=>{
				return dragBox.value.innerText == item
			})
			const dragEnterIndex = list.value.findIndex((item)=>{
				return e.target.innerText == item
			})
			if (dragBoxIndex !== dragEnterIndex) {
				list.value.splice(dragEnterIndex,0,list.value.splice(dragBoxIndex,1)[0])
			}

		}

	}

	function dragEndBox(e){
		e.target.classList.remove('dragging')
	}
</script>

<template>

	<div class="drag-section flexColumn fAlignCenter">
		<div class="box" v-for="item in list"
			 @dragstart="dragStartBox"
			 @dragenter="dragEnter"
			 @dragend="dragEndBox"
			 draggable="true" :key="item ">{{ item }}
		</div>
	</div>

</template>

<style scoped lang="scss">

	.box {
		width: 600px;
		height: 40px;
		line-height: 40px;
		margin: 10px;
		color: white;
		padding-left: 50px;
		cursor: move;
		border-radius: 5px;
		background-color: var(--el-color-primary);
	}

	.dragging {
		background-color: transparent;
		color: transparent;
		border: 1px dashed #ccc;
	}

</style>